

        <!-- help-data -->


    
    <div class="detailHandle"><div class="detailCollapsed"></div><a name='axisDefaults'><code class="symbol">axisDefaults</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Default options for all chart axes.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='categoryAxis'><code class="symbol">categoryAxis</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The category axis configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc">Category index at which the first value axis crosses this axis.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Array</span><span class="defaultValue">(default: [0])</span></div><div class="detailBody"><div class="desc">Category indicies at which the value axes cross the category axis.<p><strong>Note:&nbsp;</strong> Specify an index greater than or equal to the numberof categories to denote the far end of the axis.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     categoryAxis: {         categories: ["A", "B"]             axisCrossingValues: [0, 100]         },     valueAxis: [{ }, { name: "secondary" }],     ...})'&lt;/p&gt;</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='categories'><code class="symbol">categories</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">Array of category names.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        categories: [ 2005, 2006, 2007, 2008, 2009 ]    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Color to apply to all axis elements. Any valid CSS color string will work here, including hex and rgb.Individual color settings for line and labels take priority.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='field'><code class="symbol">field</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The data field containing the category name.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// assuming the following data...var data = [ { sales: 200, year: 2005 }, { sales: 300, year: 2006 }, { sales: 400, year: 2007 }];// specify the "year" as the field for the category axis$("#chart").kendoChart({    ...,    categoryAxis: {        field: "year"    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the axis labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        labels: {            // set the background color of the labels to a light grey            background: "#e2e2e2",            // rotate the labels just slightly for visual effect            rotation: 10,            // format the labels for currency            format: "{0:C}"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels. Any valid CSS color string will work here, including hexand rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        labels: {            border: {                // make the width 1                width: 1,                // set the color to a dark blue                color: "#336699",                // set the border style to dashed                dashType: "dash"            }        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        labels: {            // make the font 14px            font: "14px Arial,Helvetica,sans-serif"        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {       labels: {           // set the format to currency           format: "{0:C}"       }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        label: {            // sets the top, right, bottom and left margin to 3px.            margin: 3        }    },    ...});//$("#chart").kendoChart({    categoryAxis: {        label: {            // sets the top and left margin to 1px            // margin right and bottom are with 0px (by default)            margin: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='mirror'><code class="symbol">mirror</code></a>: <span class="type">Boolean</span></div><div class="detailBody"><div class="desc">Mirrors the axis labels and ticks.If the labels are normally on the left side of the axis,mirroring the axis will render them to the right.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        labels: {            // mirror the labels on the right            mirror: true        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        label: {            // sets the top, right, bottom and left padding to 3px.            padding: 3        }    },    ...});//$("#chart").kendoChart({    categoryAxis: {        label: {            // sets the top and left padding to 1px            // padding right and bottom are with 0px (by default)            padding: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='rotation'><code class="symbol">rotation</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The rotation angle of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='skip'><code class="symbol">skip</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> Number of labels to skip.Skips rendering the first n labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='step'><code class="symbol">step</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> Label rendering step.Every n-th label is rendered where n is the step</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the value</li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             name: "Series 1",             data: [200, 450, 300, 125]         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003],         labels: {             // labels template             template: "Year: #= value #"         }     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        labels: {            // hide the lables            visible: false        }    },    ...});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='line'><code class="symbol">line</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the axis line. This will also effect major and minor ticks, but not gridlines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        line: {            // change the line width to 2 pixels            width: 2,            // set the color to light grey            color: "#e2e2e2"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the lines. Any valid CSS color string will work here, including hex and rgb.<p><b>Note:</b> This will also effect the major and minor ticks, but not the grid lines.</p></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the lines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        line: {            // hide the lines completely            visible: false        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the line.  This will also effect the major and minor ticks, butnot the grid lines.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorGridLines'><code class="symbol">majorGridLines</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the major grid lines. These are the lines that are an extension of the major ticks through thebody of the chart.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {         majorGridLines: {            // set the width of the lines to 2 pixels            width: 2,            // set the color to a dark blue            color: "#336699"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the lines. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the lines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        majorGridLines: {            // hide the major grid lines            visible: false        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the lines.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorTicks'><code class="symbol">majorTicks</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The major ticks of the axis.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 4)</span></div><div class="detailBody"><div class="desc"> The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tickon the chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the major ticks.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minorGridLines'><code class="symbol">minorGridLines</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the minor grid lines.  These are the lines that are an extension of the minor ticks throughthe body of the chart. <p>Note that minor grid lines are not visible by default, therefore none of these settings will take effect with the minor gridlines visibility being set to <b>true</b></p>.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        minorGridLines: {            // set visible to true            visible: true,            // set width to 2 pixels            width: 2,            // set the color to a dark blue            color: "#336699"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the lines. Any valid CSS color string will work here, including hex andrgb. <p>Note that this setting has no effect if the visibility of the minorgrid lines is not set to <b>true</b>.</p></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the lines.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1> The width of the lines. <p)</span></div><div class="detailBody"><div class="desc"> The width of the lines. <p>Note that this setting has no effect if the visibility of the minorgrid lines is not set to <b>true</b>.</p></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minorTicks'><code class="symbol">minorTicks</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The minor ticks of the axis.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 3)</span></div><div class="detailBody"><div class="desc"> The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tickon the chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the minor ticks.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">Object</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The unique axis name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='plotBands'><code class="symbol">plotBands</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">The plot bands of category axis.The plot band fields:<div class="details-list">   <dl>        <dt>             <code>"from"</code>        </dt>        <dd>             The start position of the plot band.        </dd>        <dt>             <code>"to"</code>        </dt>        <dd>             The end position of the plot band.        </dd>        <dt>             <code>"color"</code>        </dt>        <dd>             The color of the plot band.        </dd>   </dl></div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    ...,    categoryAxis: {        plotBands: [{            from: 0.2,            to: 0.4,            color: "green"        }]    }, });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='reverse'><code class="symbol">reverse</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Reverses the axis direction -categories are listed from right to left and from top to bottom.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='title'><code class="symbol">title</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The title of the category axis.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        title: {            // set the text of the title            text: "Sales By District",            // decreate the font size of the title to 14 px            font: "14px Arial,Helvetica,sans-serif",            // move the title to the bottom            position: "bottom"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the title. Any valid CSS color string will work here, includinghex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        title: {            // tweak the border around the title            border: {                // set the width to 1                width: 1,                // set the color to a dark blue                color: "#336699",                // set the style to dashed                dashType: "dash"            }        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border. Any valid CSS color string will work here, includinghex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code></code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the title. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "16px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        title: {            // decreate the font size of the title to 14 px            font: "14px Arial,Helvetica,sans-serif"        }    }    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The margin of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        title: {            // sets the top, right, bottom and left margin to 3px.            margin: 3        }    },    ...});//$("#chart").kendoChart({    categoryAxis: {        title: {            // sets the top and left margin to 1px            // margin right and bottom are with 0px (by default)            margin: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "center")</span></div><div class="detailBody"><div class="desc"> The position of the title.<div class="details-list">   <dl>        <dt>             <code>"top"</code>        </dt>        <dd>             The axis title is positioned on the top (applicable to vertical axis)        </dd>        <dt>             <code>"bottom"</code>        </dt>        <dd>             The axis title is positioned on the bottom (applicable to vertical axis)        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The axis title is positioned on the left (applicable to horizontal axis)        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The axis title is positioned on the right (applicable to horizontal axis)        </dd>        <dt>             <code>"center"</code>        </dt>        <dd>             The axis title is positioned in the center        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='rotation'><code class="symbol">rotation</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The rotation angle of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        title: {            // rotate the title 20 degrees            rotate: 20        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='text'><code class="symbol">text</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text of the title.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    categoryAxis: {        title: {            // hide the title            visible: false        }    },    ...});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the axis.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='chartArea'><code class="symbol">chartArea</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The chart area configuration options.This is the entire visible area of the chart.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span><span class="defaultValue">(default: "white")</span></div><div class="detailBody"><div class="desc"> The background color of the chart area.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the chart area.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='height'><code class="symbol">height</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 400)</span></div><div class="detailBody"><div class="desc"> The height of the chart area.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The margin of the chart area.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and left margin to 1px// margin right and bottom are with 5px (by default)margin: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 600)</span></div><div class="detailBody"><div class="desc"> The width of the chart area.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataSource'><code class="symbol">dataSource</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">DataSource configuration or instance.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    dataSource: {        transport: {             read: "spain-electricity.json"        }    },    series: [{        field: "value"    }],    categoryAxis: {        field: "year"    }});// Alternative configurationvar dataSource = new kendo.data.DataSource({    transport: {         read: "spain-electricity.json"    }});$("#chart").kendoChart({    dataSource: dataSource,    series: [{        field: "value"    }],    categoryAxis: {        field: "year"    }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='legend'><code class="symbol">legend</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The chart legend configuration options.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    legend: {        // set the background color to a dark blue        background: "#336699",        labels: {            // set the font to a size of 14px            font: "14px Arial,Helvetica,sans-serif",            // set the color to red            color: "red"        },        // move the legend to the left        position: "left",        // move the legend a bit closer to the chart by setting the x offset to 20        offsetX: 20,        // move the legend up to the top by setting the y offset to -100        offsetY: -100,    }});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span><span class="defaultValue">(default: "white")</span></div><div class="detailBody"><div class="desc"> The background color of the legend. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the legend.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    legend: {        border: {            // set the border width to 2 pixels            width: 2,            // set the color to grey            color: "grey",            // set the dash type to solid. this is the default so we could leave this line out.            dashType: "solid"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code></code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the legend labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the labels.Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: 12px Arial,Helvetica,sans-serif)</span></div><div class="detailBody"><div class="desc"> The font style of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 10)</span></div><div class="detailBody"><div class="desc"> The margin of the legend.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    legend: {        // sets the top, right, bottom and left margin to 3px.        margin: 3    },    ...});//$("#chart").kendoChart({    legend: {        // sets the top and left margin to 1px        // margin right and bottom are with 10px (by default)        margin: { top: 1, left: 1 }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='offsetX'><code class="symbol">offsetX</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The X offset from its position.  The offset is relative to the current position of the legend.For instance, a value of 20 will move the legend 20 pixels to the right of it's initial position.  A negative value will move the legendto the left of the current position.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    legend: {        // move the legend to the left side of the chart        offsetX: 20    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='offsetY'><code class="symbol">offsetY</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The Y offset from its position.  The offset is relative to the current position of the legend.For instance, a value of 20 will move the legend 20 pixels down from it's initial position.  A negative value will move the legendupwards from the current position.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    legend: {        // move the legend up 100 pixels        offsetY: -100    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The padding of the legend.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.$("#chart").kendoChart({    legend: {        // sets the top, right, bottom and left padding to 3px.        padding: 3    },    ...});//$("#chart").kendoChart({    legend: {       // sets the top and left padding to 1px       // padding right and bottom are with 5px (by default)       padding: { top: 1, left: 1 }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: right)</span></div><div class="detailBody"><div class="desc"> The positions of the legend.<div class="details-list">   <dl>        <dt>             <code>"top"</code>        </dt>        <dd>             The legend is positioned on the top.        </dd>        <dt>             <code>"bottom"</code>        </dt>        <dd>             The legend is positioned on the bottom.        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The legend is positioned on the left.        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The legend is positioned on the right.        </dd>        <dt>             <code>"custom"</code>        </dt>        <dd>             The legend is positioned using OffsetX and OffsetY.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the legend.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    legend: {        // hide the legend        visible: false    },    ...});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='plotArea'><code class="symbol">plotArea</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The plot area configuration options. This is the area containing the plotted series.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span><span class="defaultValue">(default: "white")</span></div><div class="detailBody"><div class="desc"> The background color of the plot area.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the plot area.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The margin of the plot area.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and left margin to 1px// margin right and bottom are with 5px (by default)margin: { top: 1, left: 1 }</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='series'><code class="symbol">series</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">Array of series definitions.<p>The series type is determined by the value of the type field.If a type value is missing, the type is assumed to be the one specified in seriesDefaults.</p><p>Each series type has a different set of options.</p></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='data'><code class="symbol">data</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">Array of data points.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='field'><code class="symbol">field</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The data field containing the series value.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='groupNameTemplate'><code class="symbol">groupNameTemplate</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Name template for auto-generatedseries when binding to grouped data.Template variables:<ul>    <li><strong>series</strong> - the series options</li>    <li><strong>group</strong> - the data group</li>    <li><strong>group.field</strong> - the name of the field used for grouping</li>    <li><strong>group.value</strong> - the field value for this group.</li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     dataSource: {         data: seriesData,         group: {             field: "product",             dir: "desc"         }     },     series: [{             type: "bar",             name: "Sales",             fiels: "sales",             groupNameTemplate: "#= series.name # for #= group.field # #= group.value #"             // Sales for product Bar,             // Sales for product Foo,             // etc.         }     ]});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series name visible in the legend.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="area"'><code class="symbol">type="area"</code></a></div><div class="detailBody"><div class="desc">Available options for area series:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series base color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: { left: 5, right: 5})</span></div><div class="detailBody"><div class="desc">The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and bottom margin to 1px// margin left and right are with 5px (by default)margin: { top: 1, bottom: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 0px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "above")</span></div><div class="detailBody"><div class="desc">Defines the position of the area labels.<div class="details-list">   <dl>        <dt>             <code>"above"</code>        </dt>        <dd>             The label is positioned at the top of the area chart marker.        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The label is positioned at the right of the area chart marker.        </dd>        <dt>             <code>"below"</code>        </dt>        <dd>             The label is positioned at the bottom of the area chart marker.        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The label is positioned at the left of the area chart marker.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "area",             name: "Series 1",             data: [200, 450, 300, 125],             labels: {                 // label template                 template: "#= value #%",                 visible: true             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='line'><code class="symbol">line</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The line of the area chart.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The line color of the area chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The line opacity of the area chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">String</span><span class="defaultValue">(default: 4)</span></div><div class="detailBody"><div class="desc"> The line width of the area chart.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='markers'><code class="symbol">markers</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the area markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the current series markers.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 6)</span></div><div class="detailBody"><div class="desc"> The marker size.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type'><code class="symbol">type</code></a>: <span class="type">String</span><span class="defaultValue">(default: "circle")</span></div><div class="detailBody"><div class="desc">Configures the markers shape type.<div class="details-list">   <dl>        <dt>             <code>"square"</code>        </dt>        <dd>             The marker shape is square.        </dd>        <dt>             <code>"triangle"</code>        </dt>        <dd>             The marker shape is triangle.        </dd>        <dt>             <code>"circle"</code>        </dt>        <dd>             The marker shape is circle.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The markers visibility.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='missingValues'><code class="symbol">missingValues</code></a>: <span class="type">String</span><span class="defaultValue">(default: "gap")</span></div><div class="detailBody"><div class="desc">Configures the behavior for handling missing values in area series.<div class="details-list">   <dl>        <dt>             <code>"interpolate"</code>        </dt>        <dd>             The value is interpolated from neighboring points.        </dd>        <dt>             <code>"zero"</code>        </dt>        <dd>             The value is assumed to be zero.        </dd>        <dt>             <code>"gap"</code>        </dt>        <dd>             The line stops before the missing point and continues after it.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0.4)</span></div><div class="detailBody"><div class="desc"> The series opacity.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='stack'><code class="symbol">stack</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc">A value indicating if the series should be stacked.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "area",             name: "Series 1",             data: [200, 450, 300, 125],             tooltip: {                 visible: true,                 template: "#= category # - #= value #"             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="bar"'><code class="symbol">type="bar"</code></a></div><div class="detailBody"><div class="desc">Available options for bar series:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axis'><code class="symbol">axis</code></a>: <span class="type">String</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The name of the value axis to use.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the series.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: the color of the curren series)</span></div><div class="detailBody"><div class="desc">The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series base color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='gap'><code class="symbol">gap</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1.5)</span></div><div class="detailBody"><div class="desc"> The distance between category clusters.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 2)</span></div><div class="detailBody"><div class="desc"> The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and left margin to 1px// margin right and bottom are with 2px (by default)margin: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 2)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 2px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "outsideEnd")</span></div><div class="detailBody"><div class="desc">Defines the position of the bar labels.<div class="details-list">   <dl>        <dt>             <code>"center"</code>        </dt>        <dd>             The label is positioned at the bar center.        </dd>        <dt>             <code>"insideEnd"</code>        </dt>        <dd>             The label is positioned inside, near the end of the bar.        </dd>        <dt>             <code>"insideBase"</code>        </dt>        <dd>             The label is positioned inside, near the base of the bar.        </dd>        <dt>             <code>"outsideEnd"</code>        </dt>        <dd>             The label is positioned outside, near the end of the bar.             Not applicable for stacked bar series.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "bar",             name: "Series 1",             data: [200, 450, 300, 125],             labels: {                 // label template                 template: "#= value #%",                 visible: true             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The series opacity.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='overlay'><code class="symbol">overlay</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The effects overlay.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='gradient'><code class="symbol">gradient</code></a>: <span class="type">String</span><span class="defaultValue">(default: "glass")</span></div><div class="detailBody"><div class="desc"> The gradient name.<div class="details-list">   <dl>        <dt>             "glass"        </dt>        <dd>             The bars have glass effect overlay.        </dd>        <dt>             "none"        </dt>        <dd>             The bars have no effect overlay.        </dd>   </dl></div></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='spacing'><code class="symbol">spacing</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0.4)</span></div><div class="detailBody"><div class="desc"> Space between bars.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='stack'><code class="symbol">stack</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Indicates that the series should be stacked in a group with the specified name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='stack'><code class="symbol">stack</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc">A value indicating if the series should be stacked.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "bar",             name: "Series 1",             data: [200, 450, 300, 125],             tooltip: {                 visible: true,             template: "#= category # - #= value #"             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="column"'><code class="symbol">type="column"</code></a></div><div class="detailBody"><div class="desc">Column series accepts the same parameters as bar series.The difference is that column series are rendered on a horizontal category axis.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="line"'><code class="symbol">type="line"</code></a></div><div class="detailBody"><div class="desc">Available options for line series:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axis'><code class="symbol">axis</code></a>: <span class="type">String</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The name of the value axis to use.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series base color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the line.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: { left: 5, right: 5})</span></div><div class="detailBody"><div class="desc">The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and bottom margin to 1px// margin left and right are with 5px (by default)margin: { top: 1, bottom: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 0px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "above")</span></div><div class="detailBody"><div class="desc">Defines the position of the line labels.<div class="details-list">   <dl>        <dt>             <code>"above"</code>        </dt>        <dd>             The label is positioned at the top of the line chart marker.        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The label is positioned at the right of the line chart marker.        </dd>        <dt>             <code>"below"</code>        </dt>        <dd>             The label is positioned at the bottom of the line chart marker.        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The label is positioned at the left of the line chart marker.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "line",             name: "Series 1",             data: [200, 450, 300, 125],             labels: {                 // label template                 template: "#= value #%",                 visible: true             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='markers'><code class="symbol">markers</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the line markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the current series markers.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 6)</span></div><div class="detailBody"><div class="desc"> The marker size.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type'><code class="symbol">type</code></a>: <span class="type">String</span><span class="defaultValue">(default: "circle")</span></div><div class="detailBody"><div class="desc">Configures the markers shape type.<div class="details-list">   <dl>        <dt>             <code>"square"</code>        </dt>        <dd>             The marker shape is square.        </dd>        <dt>             <code>"triangle"</code>        </dt>        <dd>             The marker shape is triangle.        </dd>        <dt>             <code>"circle"</code>        </dt>        <dd>             The marker shape is circle.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The markers visibility.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='missingValues'><code class="symbol">missingValues</code></a>: <span class="type">String</span><span class="defaultValue">(default: "gap")</span></div><div class="detailBody"><div class="desc">Configures the behavior for handling missing values in line series.<div class="details-list">   <dl>        <dt>             <code>"interpolate"</code>        </dt>        <dd>             The value is interpolated from neighboring points.        </dd>        <dt>             <code>"zero"</code>        </dt>        <dd>             The value is assumed to be zero.        </dd>        <dt>             <code>"gap"</code>        </dt>        <dd>             The line stops before the missing point and continues after it.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The series opacity.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='stack'><code class="symbol">stack</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc">A value indicating if the series should be stacked.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "line",             name: "Series 1",             data: [200, 450, 300, 125],             tooltip: {                 visible: true,                 template: "#= category # - #= value #"             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">String</span><span class="defaultValue">(default: 4)</span></div><div class="detailBody"><div class="desc"> The line width of the line chart.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="pie"'><code class="symbol">type="pie"</code></a></div><div class="detailBody"><div class="desc">Available options for pie series:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the series.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: the color of the curren series)</span></div><div class="detailBody"><div class="desc">The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: solid)</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='categoryField'><code class="symbol">categoryField</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The data field containing the sector category name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='colorField'><code class="symbol">colorField</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The data field containing the sector color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='connectors'><code class="symbol">connectors</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The label connectors options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The color of the connector line.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 4)</span></div><div class="detailBody"><div class="desc">The padding between the connector line and the label, and connector line and pie chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the connector line.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='data'><code class="symbol">data</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">Array of data items (optional).The pie chart can be bound to an array of numbers or an array of objectswith the following fields:<div class="details-list">   <dl>        <dt>             <code>"value"</code>        </dt>        <dd>             The sector value.        </dd>        <dt>             <code>"category"</code>        </dt>        <dd>             The sector category that is shown in the legend.        </dd>        <dt>             <code>"color"</code>        </dt>        <dd>             The sector color.        </dd>        <dt>             <code>"explode"</code>        </dt>        <dd>             A boolean value indicating whether to explode the sector.        </dd>        <dt>             <code>"visibleInLegend"</code>        </dt>        <dd>             A boolean value indicating whether to show the sector in the legend.        </dd>   </dl></div> </div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// ... series:[{     type: "pie",     data:[{         value: 40,         category: "Apples"     }, {         value: 60,         category: "Oranges",         color: "#ff6103"         }     ],     name: "Sales in Percent" }] // ...</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='explodeField'><code class="symbol">explodeField</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The data field containing a boolean value that indicates if the sector is exploded.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='align'><code class="symbol">align</code></a>: <span class="type">String</span><span class="defaultValue">(default: "circle")</span></div><div class="detailBody"><div class="desc">Defines the alignment of the pie labels.<div class="details-list">   <dl>        <dt>            <code>"circle"</code>        </dt>        <dd>             The labels are positioned in circle around the pie chart.        </dd>        <dt>            <code>"column"</code>        </dt>        <dd>             The labels are positioned in columns to the left and right of the pie chart.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='distance'><code class="symbol">distance</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 35)</span></div><div class="detailBody"><div class="desc"> The distance of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial, sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0.5)</span></div><div class="detailBody"><div class="desc"> The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and left margin to 1px// margin right and bottom are with 2px (by default)margin: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 2px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "outsideEnd")</span></div><div class="detailBody"><div class="desc">Defines the position of the pie labels.<div class="details-list">    <dl>        <dt>             <code>"center"</code>        </dt>        <dd>             The labels are positioned at the center of the pie segments.        </dd>        <dt>             <code>"insideEnd"</code>        </dt>        <dd>             The labels are positioned inside, near the end of the pie segments.        </dd>        <dt>             <code>"outsideEnd"</code>        </dt>        <dd>             The labels are positioned outside, near the end of the pie segments.             The labels and the pie segments are connected with connector line.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>percentage</strong> - the point value represented as a percentage value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "pie",             name: "Series 1",             data: [                 { value: 200, category: 2000 },                 { value: 450, category: 2001 },                 { value: 300, category: 2002 },                 { value: 125, category: 2003 }             ],             labels: {                 // label template                 template: "#= value #%",                 visible: true             }         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The series opacity.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='overlay'><code class="symbol">overlay</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The effects overlay.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='gradient'><code class="symbol">gradient</code></a>: <span class="type">String</span><span class="defaultValue">(default: "roundBevel")</span></div><div class="detailBody"><div class="desc"> The gradient name.Available options are "none", "sharpBevel" and "roundBevel".</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The padding around the pie chart (equal on all sides).</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='startAngle'><code class="symbol">startAngle</code></a>: <span class="type">number</span><span class="defaultValue">(default: 90)</span></div><div class="detailBody"><div class="desc"> The start angle of the first pie segment.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>percentage</strong> - the point value represented as a percentage value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "pie",             name: "Series 1",             data: [200, 450, 300, 125],             tooltip: {                 visible: true,                 template: "#= category # - #= value #"             }         }     ]});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="scatter"'><code class="symbol">type="scatter"</code></a></div><div class="detailBody"><div class="desc">Available options for scatter series:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series base color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='data'><code class="symbol">data</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">Array of data items (optional).The scatter chart can be bound to an array of arrays with two numbers (X and Y). </div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// ... series:[{     type: "scatter",     data:[[1, 1], [1, 2]],     name: "Points" }] // ...</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: { left: 5, right: 5})</span></div><div class="detailBody"><div class="desc">The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and bottom margin to 1px// margin left and right are with 5px (by default)margin: { top: 1, bottom: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 0px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "above")</span></div><div class="detailBody"><div class="desc">Defines the position of the scatter labels.<div class="details-list">   <dl>        <dt>             <code>"above"</code>        </dt>        <dd>             The label is positioned at the top of the scatter chart marker.        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The label is positioned at the right of the scatter chart marker.        </dd>        <dt>             <code>"below"</code>        </dt>        <dd>             The label is positioned at the bottom of the scatter chart marker.        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The label is positioned at the left of the scatter chart marker.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value.x</strong> - the x value</li>    <li><strong>value.y</strong> - the y value</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "scatter",             name: "Series 1",             data: [[1, 1], [1, 2], [1, 3]],             labels: {                 // label template                 template: "#= value.x # - #= value.y x #",                 visible: true             }         }     ]});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='markers'><code class="symbol">markers</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the scatter markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the current series markers.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 6)</span></div><div class="detailBody"><div class="desc"> The marker size.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type'><code class="symbol">type</code></a>: <span class="type">String</span><span class="defaultValue">(default: "circle")</span></div><div class="detailBody"><div class="desc">Configures the markers shape type.<div class="details-list">   <dl>        <dt>            <code>"square"</code>        </dt>        <dd>             The marker shape is square.        </dd>        <dt>             <code>"triangle"</code>        </dt>        <dd>             The marker shape is triangle.        </dd>        <dt>             <code>"circle"</code>        </dt>        <dd>             The marker shape is circle.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The markers visibility.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The series opacity.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}--{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value.x</strong> - the x value</li>    <li><strong>value.y</strong> - the y value</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "scatter",             name: "Series 1",             data: [[1, 1], [1, 2], [1, 3]],             tooltip: {                 visible: true,                 template: "#= category # - #= value.x # - #= value.y #"             }         }     ]});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='xAxis'><code class="symbol">xAxis</code></a>: <span class="type">String</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The name of the X axis to use.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='yAxis'><code class="symbol">yAxis</code></a>: <span class="type">String</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The name of the Y axis to use.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="scatterLine"'><code class="symbol">type="scatterLine"</code></a></div><div class="detailBody"><div class="desc">Available options for scatter line series:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series base color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the line.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='data'><code class="symbol">data</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">Array of data items (optional).The scatter chart can be bound to an array of arrays with two numbers (X and Y). </div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// ... series:[{     type: "scatterLine",     data:[[1, 1], [1, 2]],     name: "Points" }] // ...</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}--{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: { left: 5, right: 5})</span></div><div class="detailBody"><div class="desc">The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.margin: 3// sets the top and bottom margin to 1px// margin left and right are with 5px (by default)margin: { top: 1, bottom: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 0px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "above")</span></div><div class="detailBody"><div class="desc">Defines the position of the scatter labels.<div class="details-list">   <dl>        <dt>             <code>"above"</code>        </dt>        <dd>             The label is positioned at the top of the scatter chart marker.        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The label is positioned at the right of the scatter chart marker.        </dd>        <dt>             <code>"below"</code>        </dt>        <dd>             The label is positioned at the bottom of the scatter chart marker.        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The label is positioned at the left of the scatter chart marker.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value.x</strong> - the x value</li>    <li><strong>value.y</strong> - the y value</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "scatterLine",             name: "Series 1",             data: [[1, 1], [1, 2], [1, 3]],             labels: {                 // label template                 template: "#= value.x # - #= value.y #",                 visible: true             }         }     ]});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='markers'><code class="symbol">markers</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the scatter markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the current series markers.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the markers.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 6)</span></div><div class="detailBody"><div class="desc"> The marker size.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type'><code class="symbol">type</code></a>: <span class="type">String</span><span class="defaultValue">(default: "circle")</span></div><div class="detailBody"><div class="desc">Configures the markers shape type.<div class="details-list">   <dl>        <dt>             <code>"square"</code>        </dt>        <dd>             The marker shape is square.        </dd>        <dt>             <code>"triangle"</code>        </dt>        <dd>             The marker shape is triangle.        </dd>        <dt>             <code>"circle"</code>        </dt>        <dd>             The marker shape is circle.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The markers visibility.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='missingValues'><code class="symbol">missingValues</code></a>: <span class="type">String</span><span class="defaultValue">(default: "gap")</span></div><div class="detailBody"><div class="desc">Configures the behavior for handling missing values in scatter series.<div class="details-list">   <dl>        <dt>             <code>"interpolate"</code>        </dt>        <dd>             The value is interpolated from neighboring points.        </dd>        <dt>             <code>"zero"</code>        </dt>        <dd>             The value is assumed to be zero.        </dd>        <dt>             <code>"gap"</code>        </dt>        <dd>             The line stops before the missing point and continues after it.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The series name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='opacity'><code class="symbol">opacity</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The series opacity.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value.x</strong> - the x value</li>    <li><strong>value.y</strong> - the y value</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             type: "scatterLine",             name: "Series 1",             data: [[1, 1], [1, 2], [1, 3]],             tooltip: {                 visible: true,                 template: "#= category # - #= value.x # - #= value.y #"             }         }     ]});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The line width of the scatter line chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='xAxis'><code class="symbol">xAxis</code></a>: <span class="type">String</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The name of the X axis to use.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='yAxis'><code class="symbol">yAxis</code></a>: <span class="type">String</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The name of the Y axis to use.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="verticalArea"'><code class="symbol">type="verticalArea"</code></a></div><div class="detailBody"><div class="desc">Vertical area series use the same options as area series.The category axis is rendered vertically instead of horizontally.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='type="verticalLine"'><code class="symbol">type="verticalLine"</code></a></div><div class="detailBody"><div class="desc">Vertical line series accepts the same parameters as line series.The line and the category axis are now vertical instead of horizontal.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visibleInLegend'><code class="symbol">visibleInLegend</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> A value indicating whether to show the series in the legend.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='seriesColors'><code class="symbol">seriesColors</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">The default colors for the chart's series. When all colors are used, new colors are pulled from the start again.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='seriesDefaults'><code class="symbol">seriesDefaults</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Default values for each series.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='area'><code class="symbol">area</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The area configuration options.The default options for all area series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='bar'><code class="symbol">bar</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The default options for all bar series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the series.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='column'><code class="symbol">column</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The column configuration options.The default options for all column series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='gap'><code class="symbol">gap</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1.5)</span></div><div class="detailBody"><div class="desc"> The distance between category clusters.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the series data labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    seriesDefault: {        // adjust the default label appearence for all series        labels: {            // set the margin on all sides to 1            margin: 1,            // format the labels as currency            format: "{0:C}"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels. Any valid CSS color string will work here,including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels. Any valid CSS color string will work here, inlcuding hexand rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.labels </div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    seriesDefault: {        // adjust the default label appearence for all series        labels: {            // set the font size to 14px            font: "14px Arial,Helvetica,sans-serif"        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the labelsformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart).kendoChart({     labels: {         // sets the top, right, bottom and left margin to 3px.         margin: 3     },     ...});//$("#chart").kendoChart({     labels: {         // sets the top and left margin to 1px         // margin right and bottom are with 0px (by default)         margin: { top: 1, left: 1 }     },     ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// padding right and bottom are with 0px (by default)padding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     seriesDefault: {         labels: {             // label template             template: "#= value  #%",             visible: true         }     },     series: [         {             name: "Series 1",             data: [200, 450, 300, 125]         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    seriesDefault: {        labels: {            // hide all the series labels by default            visible: true        },        ...    }});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='line'><code class="symbol">line</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The line configuration options.The default options for all line series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='overlay'><code class="symbol">overlay</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The effects overlay.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='pie'><code class="symbol">pie</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The pie configuration options.The default options for all pie series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='scatter'><code class="symbol">scatter</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The scatter configuration options.The default options for all scatter series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='scatterLine'><code class="symbol">scatterLine</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The scatterLine configuration options.The default options for all scatterLine series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='spacing'><code class="symbol">spacing</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0.4)</span></div><div class="detailBody"><div class="desc"> Space between bars.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='stack'><code class="symbol">stack</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc">A value indicating if the series should be stacked.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     seriesDefaults: {         tooltip: {             visible: true,             template: "#= category # - #= value #"         }     },     series: [         {             name: "Series 1",             data: [200, 450, 300, 125]         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='verticalArea'><code class="symbol">verticalArea</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The vertical area configuration options.The default options for all vertical area series. For more details see the series options.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='verticalLine'><code class="symbol">verticalLine</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The vertical line configuration options.The default options for all vertical line series. For more details see the series options.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='theme'><code class="symbol">theme</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Sets Chart theme. Available themes: default, blueOpal, black.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='title'><code class="symbol">title</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The chart title configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='align'><code class="symbol">align</code></a>: <span class="type">String</span><span class="defaultValue">(default: "center")</span></div><div class="detailBody"><div class="desc"> The alignment of the title.<div class="details-list">   <dl>        <dt>             <code>"left"</code>        </dt>        <dd>             The text is aligned to the left.        </dd>        <dt>             <code>"center"</code>        </dt>        <dd>             The text is aligned to the middle.        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             The text is aligned to the right.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span><span class="defaultValue">(default: "white")</span></div><div class="detailBody"><div class="desc"> The background color of the title.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    // set border options on the title    title: {        border: {            // set the border color to a dark blue            color: "#336699",            // set the width of the border to 2 pixels            width: 2,            // set the border style to long dashes            dashType: "longDash"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "16px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The font of the title.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The margin of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    // sets the top, right, bottom and left margin to 3px.    title: {        margin: 3    },    ...});//$("#chart").kendoChart({    // sets the top and left margin to 1px    // margin right and bottom are with 5px (by default)    title: {        margin: { top: 1, left: 1 }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The padding of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    // sets the top, right, bottom and left padding to 3px.    title: {        padding: 3    },    ...});//$("#chart").kendoChart({    // sets the top and left padding to 1px    // padding right and bottom are with 5px (by default)    title: {        padding: { top: 1, left: 1 }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "top")</span></div><div class="detailBody"><div class="desc"> The position of the title.<div class="details-list">   <dl>        <dt>             <code>"top"</code>        </dt>        <dd>             The title is positioned on the top.        </dd>        <dt>             <code>"bottom"</code>        </dt>        <dd>             The title is positioned on the bottom.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='text'><code class="symbol">text</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The title of the chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart ").kendoChart({    title: {        // hides the title        visible: false    },    ...});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='tooltip'><code class="symbol">tooltip</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The data point tooltip configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the tooltip. The default is determined from the series color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the tooltip. The default is the same as the series labels color.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc"> The tooltip font.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The tooltip format.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//sets format of the tooltipformat: "{0:C}"</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number|Object</span></div><div class="detailBody"><div class="desc">The padding of the tooltip.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left padding to 3px.padding: 3// sets the top and left padding to 1px// right and bottom padding are left at their default valuespadding: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String|Function</span></div><div class="detailBody"><div class="desc">The tooltip template.Template variables:<ul>    <li><strong>value</strong> - the point value</li>    <li><strong>category</strong> - the category name</li>    <li><strong>series</strong> - the data series</li>    <li><strong>dataItem</strong> - the original data item used to construct the point.        Will be null if binding to array.    </li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             name: "Series 1",             data: [200, 450, 300, 125]         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     },     tooltip: {         visible: true,         template: "#= category # - #= value #"     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> A value indicating if the tooltip should be displayed.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='transitions'><code class="symbol">transitions</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc">A value indicating if transition animations should be played.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='valueAxis'><code class="symbol">valueAxis</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The value axis configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> Value at which the category axis crosses this axis.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Color to apply to all axis elements.Individual color settings for line and labels take priority. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the axis labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        labels: {            // set the color of the text on the labels to a dark blue            color: "#336699",            // set the background color of the labels to a light grey            background: "#e2e2e2",            // make the font 14px            // rotate the labels just slightly for visual effect            rotation: 10,            // format the labels for currency            format: "{0:C}"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels. Any valid CSS color string will work here, includinghex and rgb</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        labels: {            border: {                // make the width 1                width: 1,                // set the color to a dark blue                color: "#336699",                // set the border style to dashed                dashType: "dash"            }        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border. Any valid CSS color string will work here, includinghex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {       labels: {           // set the format to currency           format: "{0:C}"       }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The margin of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        label: {            // sets the top, right, bottom and left margin to 3px.            margin: 3       }    },    ...});//$("#chart").kendoChart({    valueAxis: {        label: {            // sets the top and left margin to 1px            // margin right and bottom are with 0px (by default)            margin: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='mirror'><code class="symbol">mirror</code></a>: <span class="type">Boolean</span></div><div class="detailBody"><div class="desc">Mirrors the axis labels and ticks.If the labels are normally on the left side of the axis,mirroring the axis will render them to the right.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        labels: {            // mirror the labels on the right             mirror: true        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        label: {            // sets the top, right, bottom and left padding to 3px.            padding: 3        }    },    ...});//$("#chart").kendoChart({    valueAxis: {        label: {            // sets the top and left padding to 1px            // padding right and bottom are with 0px (by default)            padding: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='rotation'><code class="symbol">rotation</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The rotation angle of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='skip'><code class="symbol">skip</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> Number of labels to skip.Skips rendering the first n labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='step'><code class="symbol">step</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> Label rendering step.Every n-th label is rendered where n is the step</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.Template variables:<ul>    <li><strong>value</strong> - the value</li></ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization$("#chart").kendoChart({     title: {         text: "My Chart Title"     },     series: [         {             name: "Series 1",             data: [200, 450, 300, 125]         }     ],     categoryAxis: {         categories: [2000, 2001, 2002, 2003]     },     valueAxis: {         labels: {             // labels template             template: "#= value #%"         }     }});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        labels: {            // hide the axis labels            visible: false        }   },   ...});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='line'><code class="symbol">line</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the axis line.  This will also affect the major and minor ticks, but not the grid lines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        line: {            // change the line width to 2 pixels            width: 2,            // set the color to light grey            color: "#e2e2e2"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the lines. This will also affect the major and minor ticks, but not thegrid lines.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the lines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        line: {            // hide the axis lines altogether            visible: false        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the lines.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorGridLines'><code class="symbol">majorGridLines</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the major grid lines.  These are the lines that are an extension of the major ticks through thebody of the chart.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        minorGridLines: {            // set visible to true            visible: true,            // set width to 2 pixels            width: 2,            // set the color to a dark blue            color: "#336699"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the lines.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the lines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        minorGridLines: {            // set visible to true            visible: false        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the lines.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorTicks'><code class="symbol">majorTicks</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The major ticks of the axis.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 4)</span></div><div class="detailBody"><div class="desc"> The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tickon the chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the major ticks.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorUnit'><code class="symbol">majorUnit</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The interval between major divisions. For instance, on a column chart, its the step size while going up thevertical axis.You can additionally have minor steps and ticks in between the major ones by adjusting the <b>minorUnit</b>, <b>minorTicks.size</b>.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        // show ticks in steps of 100.        majorUnit: 100,        // by default, the size is 4. increase it to 5 pixels.        majorTicks.size: 5,        // only the number will appear.        majorTicks.visible: false    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='max'><code class="symbol">max</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The maximum value of the axis.This is often used in combination with the <b>min</b> configuration methodto adjust the size of the chart relative to the charting area.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    // assuming the data set lowest value is 20 and the highest is 100,    // we can make the chart bigger in the chart area by adjusting the min/max values    valueAxis: {        min: 10,        max: 100    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='min'><code class="symbol">min</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The minimum value of the axis.This is often used in combination with the <b>max</b> configuration methodto adjust the size of the chart relative to the charting area.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    // assuming the data set lowest value is 20 and the highest is 100,    // we can make the chart bigger in the chart area by adjusting the min/max values    valueAxis: {        min: 10,        max: 100    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minorGridLines'><code class="symbol">minorGridLines</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the minor grid lines.  These are the lines that are an extension of the minor ticks through thebody of the chart.  <p>Note that minor grid lines are not visible by default, therefore none of these settings will take effect without the minor gridlines visibility being set to <b>true</b></p>.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        minorGridLines: {            // set visible to true            visible: true,            // set width to 2 pixels            width: 2,            // set the color to a dark blue            color: "#336699"        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the lines.<p>Note that this has no effect if the visibility of the minor grid lines is not set to <b>true</b>.</p></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the lines.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        minorGridLines: {            // set visible to true. they are hidden by default            visible: true        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 1)</span></div><div class="detailBody"><div class="desc"> The width of the lines.<p>Note that this settings has no effect if the visibility of the minor grid lines is not set to <b>true</b>.</p></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minorTicks'><code class="symbol">minorTicks</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The minor ticks of the axis.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 3)</span></div><div class="detailBody"><div class="desc"> The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tickon the chart.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> The visibility of the minor ticks.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">Object</span><span class="defaultValue">(default: primary)</span></div><div class="detailBody"><div class="desc"> The unique axis name.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='plotBands'><code class="symbol">plotBands</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">The plot bands of the value axis.The plot band fields:<div class="details-list">   <dl>        <dt>             <code>"from"</code>        </dt>        <dd>             The start position of the plot band in axis units.        </dd>        <dt>            <code>"to"</code>        </dt>        <dd>             The end position of the plot band in axis units.        </dd>        <dt>             <code>"color"</code>        </dt>        <dd>             The color of the plot band.        </dd>   </dl></div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    ...,    valueAxis: {        plotBands: [{            from: 0.2,            to: 0.4,            color: "green"        }]    }, });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='reverse'><code class="symbol">reverse</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Reverses the axis direction -values increase from right to left and from top to bottom.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='title'><code class="symbol">title</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The title of the value axis.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    title: {        // set the color of the title text to a dark blue        color: "#336699",        // set the background color to a light grey        background: "#e2e2e2",        // set the text of the title        text: "Sales By District",        // move the title to the bottom        position: "bottom"    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the title. Any valid CSS color string will work here, includinghex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        title: {            // tweak the border around the title            border: {                // set the width to 1                width: 1,                // set the color to a dark blue                color: "#336699",                // set the style to dashed                dashType: "dash"            }        }    },    ...});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc"> The color of the border.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc"> The dash type of the border.<div class="details-list">    <dl>        <dt>             <code>"solid"</code>        </dt>        <dd>             Specifies a solid line.        </dd>        <dt>             <code>"dot"</code>        </dt>        <dd>             Specifies a line consisting of dots.        </dd>        <dt>             <code>"dash"</code>        </dt>        <dd>             Specifies a line consisting of dashes.        </dd>        <dt>             <code>"longDash"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash.        </dd>        <dt>             <code>"dashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of dash-dot.        </dd>        <dt>             <code>"longDashDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot.        </dd>        <dt>             <code>"longDashDotDot"</code>        </dt>        <dd>             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the title. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "16px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">The font style of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        title: {            // decreate the font size of the title to 14 px            font: "14px Arial,Helvetica,sans-serif"        }    }    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The margin of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        title: {            // sets the top, right, bottom and left margin to 3px.            margin: 3        }    },    ...});//$("#chart").kendoChart({    valueAxis: {        title: {            // sets the top and left margin to 1px            // margin right and bottom are with 0px (by default)            margin: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        title: {            // sets the top, right, bottom and left padding to 3px.            padding: 3        }    },    ...});$("#chart").kendoChart({    valueAxis: {        title: {            // sets the top and left padding to 1px            // padding right and bottom are with 0px (by default)            padding: { top: 1, left: 1 }        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='position'><code class="symbol">position</code></a>: <span class="type">String</span><span class="defaultValue">(default: "center")</span></div><div class="detailBody"><div class="desc"> The position of the title.<div class="details-list">   <dl>        <dt>             <code>"top"</code>        </dt>        <dd>             The axis title is positioned on the top (applicable to vertical axis).        </dd>        <dt>             <code>"bottom"</code>        </dt>        <dd>             The axis title is positioned on the bottom (applicable to vertical axis).        </dd>        <dt>             <code>"left"</code>        </dt>        <dd>             The axis title is positioned on the left (applicable to horizontal axis).        </dd>        <dt>             <code>"right"</code>        </dt>        <dd>             "The axis title is positioned on the right (applicable to horizontal axis).        </dd>        <dt>            <code>"center"</code>        </dt>        <dd>             "The axis title is positioned in the center.        </dd>   </dl></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='rotation'><code class="symbol">rotation</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The rotation angle of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        title: {            // rotate the title 20 degrees            rotate: 20        }    },    ...});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='text'><code class="symbol">text</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text of the title.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the title.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({    valueAxis: {        title: {            // hide the title            visible: false        }    },    ...});</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the axis.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='xAxis'><code class="symbol">xAxis</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Scatter charts X-axis configuration options.Includes all valueAxis options in addition to:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc">Value at which the first Y axis crosses this axis.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Array</span><span class="defaultValue">(default: [0])</span></div><div class="detailBody"><div class="desc">Values at which the Y axes cross this X axis.<p><strong>Note:&nbsp;</strong> Specify a value greater than or equal to theaxis maximum value to denote the far end of the axis.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     ...,     xAxis: {         axisCrossingValues: [0, 1000]     },     yAxis: [{ }, { name: "secondary" }],     ...});&lt;/p&gt;</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='yAxis'><code class="symbol">yAxis</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The scatter charts Y-axis configuration options.Includes all valueAxis options in addition to:</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc">Value at which the first X axis crosses this axis.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='axisCrossingValue'><code class="symbol">axisCrossingValue</code></a>: <span class="type">Array</span><span class="defaultValue">(default: [0])</span></div><div class="detailBody"><div class="desc">Values at which the X axes cross this Y axis.<p><strong>Note:&nbsp;</strong> Specify a value greater than or equal to theaxis maximum value to denote the far end of the axis.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#chart").kendoChart({     ...,     yAxis: {         axisCrossingValues: [0, 1000]     },     xAxis: [{ }, { name: "secondary" }],     ...});&lt;/p&gt;</code></pre></div></div></div>

